import s from './index.less';
import React, { useEffect, useRef, useState } from 'react';
import { useHistory } from 'dva';
import { Form, Input, Spin, notification, message } from 'antd';

import iconName from '@/assets/login/icon-name.svg';
import iconPassword from '@/assets/login/icon-password.svg';
import iconVerify from '@/assets/login/icon-verify.svg';
import iconRefresh from '@/assets/login/icon-refresh.svg';
import Code from './Code';
import html2canvas from 'html2canvas';

// const Test=()=>{
//   let  content=document.getElementById('class');
//   html2canvas(content, {
//     useCORS: true,
//   }).then((canvas) => {
//     //处理你生成的canvas
//     let a = document.createElement('a');
//      a.setAttribute('href', canvas.toDataURL());　　//toDataUrl：将canvas画布信息转化为base64格式图片
//      a.setAttribute('download', 'downImg')　　//这个是必须的，否则会报错
//      a.setAttribute('target', '_self');
//      a.click()
//   })

// }

const Login = () => {
  const history = useHistory();
  const input = useRef();
  const [loading, setLoading] = useState(false);

  const [form] = Form.useForm();
  // console.log(123,Form);
  const toLogin = () => {
    form.validateFields().then(values => {
      console.log(values.verifyCode);
    });
    setLoading(true);
    setTimeout(() => {
      message.success('登录成功！');
      history.push('/home');
      setLoading(false);
    }, 1000);
    localStorage.setItem('token', true);
    // Test()
  };
  const verifyHandle = () => {
    input.current.innerText = Code();
  };
  useEffect(() => {
    verifyHandle();
  }, []);
  const verifyJust = () => {
    form.validateFields().then(values => {
      let str = String(values.verifyCode);
      if (
        str.trim() !== input.current.innerText &&
        values.verifyCode !== undefined &&
        values.verifyCode !== ''
      ) {
        message.error('验证码输入有误哦');
      }
    });
  };
  return (
    <div className={s.loginContainer} id="class">
      <div className={s.contentBox}>
        <div className={s.illustration}></div>
        <Spin tip="登录中，请稍等..." spinning={loading}>
          <div className={s.loginBox}>
            <div className={s.loginTitle}>后台管理系统</div>
            <div className={s.formBox}>
              <Form form={form} name="login_form" layout="vertical">
                <Form.Item name="loginName">
                  <Input
                    className={s.loginInput}
                    prefix={<img className={s.loginIcon} src={iconName} alt="" />}
                    placeholder="请输入账号"
                    autoComplete="off"
                  />
                </Form.Item>
                <Form.Item name="loginPwd">
                  <Input.Password
                    className={s.loginInput}
                    prefix={<img className={s.loginIcon} src={iconPassword} alt="" />}
                    placeholder="请输入密码"
                    autoComplete="off"
                  />
                </Form.Item>
                <div className={s.verifyCodeBox}>
                  <Form.Item name="verifyCode">
                    <Input
                      className={`${s.loginInput} ${s.verifyCodeInput}`}
                      prefix={<img className={s.loginIcon} src={iconVerify} alt="" />}
                      placeholder="请输入验证码"
                      autoComplete="off"
                      onBlur={verifyJust}
                    />
                  </Form.Item>
                  <div className={s.verifyCodeImgBox}>
                    <div ref={input} className={s.verifyBox}></div>
                    <img className={s.refresh} src={iconRefresh} alt="" onClick={verifyHandle} />
                  </div>
                </div>
              </Form>
              <div className={s.loginBtn} onClick={toLogin}>
                登 录
              </div>
            </div>
            <div className={s.tip}>忘记密码请联系管理员</div>
          </div>
        </Spin>
      </div>
    </div>
  );
};
export default Login;
